<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>千郡医疗-个人信息</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" th:href="@{/weixin/css/style.css}" />
	<link rel="stylesheet" th:href="@{/weixin/css/weui.min.css}" />
	<script type="text/javascript" th:src="@{/weixin/js/adaptive.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/fastclick.min.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/zepto.min.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/picker-citys.js}"></script>
	<script type="text/javascript" th:src="@{/weixin/js/weui.min.js}"></script>
	<style type="text/css">
	 body{font-size: initial !important;}
	</style>
</head>
<body>
	<section class="myself">
		<ul>
			<li class="avatarBox" id="imgUploader">
				<label for="" class="lab fl">我的头像</label>
				<img th:src="${customer.headImage}" class="avatar fr" id="headImage"/>
				<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>
			</li>
		</ul>
		<ul>
			<li class="box-h"><label for="" class="lab">名字</label>
				<input type="text" th:value="${customer.name}" class="txt flex" readonly="readonly"/>
			</li>
			<li class="box-h"><label for="" class="lab">手机号</label>
				<input type="text" th:value="${customer.phoneNo}" class="txt flex" readonly="readonly"/>
			</li>
			<li class="box-h"><label for="" class="lab">性别</label>
				<input type="text" class="txt flex" id="sexpicker" readonly="readonly" />
			</li>
			<li class="box-h"><label for="" class="lab">地区</label>
				<input type="text" id="citypicker" class="txt flex" th:value="${customer.province} + ' ' +${customer.city}+' '+${customer.area}" readonly="readonly" />
			</li>
		</ul>
		<ul>
			<li class="box-h" onclick="location.href='/qianjun/weixin/customer/pwdmodify'">
				<label for="" class="lab">修改密码</label>	
			</li>
			<li class="box-h" onclick="location.href='/qianjun/weixin/login'">
				<label for="" class="lab">切换帐号</label>	
			</li>
		</ul>
		<form id="form">
			<input type="hidden" name="provinceId" id="provinceId" th:value="${customer.provinceId}" />
			<input type="hidden" name="cityId" id="cityId" th:value="${customer.cityId}" />
			<input type="hidden" name="areaId" id="areaId" th:value="${customer.areaId}" />
			<input type="hidden" name="province" id="province" th:value="${customer.province}" />
			<input type="hidden" name="city" id="city" th:value="${customer.city}" />
			<input type="hidden" name="area" id="area" th:value="${customer.area}" />
			<input type="hidden" name="sex" id="sex" th:value="${customer.sex}" />
		</form>
	</section>
</body>
<script type="text/javascript">
var sex = {"1":"男", "2":"女", "0":"未知"};
$(function(){
	$("#sexpicker").val(sex[$("#sex").val()]);
	
	$("#citypicker").click(function(){
	   weui.picker($.citys, {
	        depth: 3,
	        defaultValue: [$("#provinceId").val(), $("#cityId").val(), $("#areaId").val()],
	        onConfirm: function onConfirm(result) {
	        	$("#provinceId").val(result[0].value);
	            $("#province").val(result[0].label);
	            $("#city").val(result[1].label);
	            $("#cityId").val(result[1].value);

	            $("#area").val("");
	            $("#areaId").val("");
	            if(result[2]){
	            	$("#area").val(result[2].label);
	            	$("#areaId").val(result[2].value);
	            }
	            
	            $("#citypicker").val($("#province").val() + " " + $("#city").val() + " " + $("#area").val());
	            submit();
	        },
	        id: 'cascadePicker'
	   });
	});

	$("#sexpicker").click(function(){
	   weui.picker([
		   		{"label":"男", "value":"1" },
		   		{"label":"女", "value":"2" },
		   		{"label":"未知", "value":"0" },
			],{
	        onConfirm: function onConfirm(result) {
	            $("#sex").val(result[0].value);
	            $("#sexpicker").val(result[0].label);
	            submit();
	        },
	        defaultValue: [$("#sex").val()],
	        id: 'sexPicker2'
	   });
	});
	
	var loading;
	weui.uploader('#imgUploader', {
	    url: '/qianjun/weixin/customer/upload',
	    auto: true,
	    onBeforeSend: function onBeforeSend(data, headers) {
	    	loading = weui.loading("正在提交");
	    },
	    onSuccess: function onSuccess(ret) {
	    	loading | loading.hide();
	    	if(ret.success){
	    		$("#headImage").attr("src", ret.msg);
	    		weui.toast("头像上传成功");
	    		return;
	    	}
	    	weui.alert("头像上传失败");
	    },
	    onError: function onError(err) {
	    	weui.alert("头像上传失败");
	    }
	});
})

	
function submit() {
	var l = weui.loading("正在提交");
	$.ajax({
		type : "POST",
		url : "/qianjun/weixin/customer/modify",
		data : $('#form').serialize(),
		error : function(request) {
			l.hide();
			weui.alert("保存失败");
		},
		success : function(data) {
			l.hide();
			data.success ? weui.toast("保存成功") : weui.alert(data.msg);
		}
	});
}
	
</script>
</html>